<template>
	<div class="win win-profile" v-if="user">
		<div class="title-wrap">
			<span class="title">
				{{ $t('personal_information') }}
			</span>
		</div>

		<div class="content-wrap">
			<div class="content">
				<div class="form-group">
					<span>{{ $t('username') }}</span>

					<input type="text" class="disable" disabled="true" :value="user.name">
				</div>

				<div class="form-group">
					<span class="required">{{ $t('nick') }}</span>

					<input type="text" v-model="user.nick">
				</div>

				<div class="form-group">
					<span class="required">{{ $t('realName') }}</span>

					<div class="input-group">
						<input type="text" v-model="user.ext.realName">

						<span class="tips">
							注：只会出现在比赛列表中
						</span>
					</div>
				</div>

				<div class="form-group">
					<span>{{ $t('school') }}</span>

					<input type="text" v-model="user.ext.school">
				</div>

				<div class="form-group">
					<span>{{ $t('college') }}</span>

					<input type="text" v-model="user.ext.college">
				</div>

				<div class="form-group">
					<span>{{ $t('class') }}</span>

					<div class="input-group">
						<input type="text" v-model="user.ext.class">

						<span class="tips">
							如：网络182班、信安182班
						</span>
					</div>
				</div>

				<div class="form-group">
					<span class="required">{{ $t('email') }}</span>

					<input type="text" class="disable" disabled="true" :value="user.email">
				</div>

				<div class="form-group">
					<span class="required">{{ $t('phone') }}</span>

					<input type="text" class="disable" disabled="true" :value="user.phone">
				</div>
			</div>


			<div class="func-btn-group">
				<button class="btn btn-success" @click="save">
					{{ $t('save') }}
				</button>

				<button class="btn btn-secondary" onclick="history.back()">
					{{ $t('return') }}
				</button>
			</div>
		</div>
	</div>
</template>


<script type="module">
import { UserService } from '@/common/common.object'
import { store } from '@/common/store';

export default {
	data() {
		return {
			store,
		};
	},
	computed: {
		user() {
			return store.user;
		}
	},
	methods: {
		save() {
			UserService.modifyProfile({
				nick: this.user.nick,
				ext: JSON.stringify(this.user.ext),
			}).then(result => {
				alert("保存成功!")
			}).catch(error => alert("保存失败：" + error));
		}
	}
};
</script>



<style scoped>
.win {
	margin: 0 auto;
	width: 560px;

	border: 1px solid #337ab7;
	border-radius: 6px;
}

.win>.title-wrap {
	margin-top: 0;
	margin-bottom: 0;
	padding: 10px 15px;

	font-size: 16px;

	border-bottom: 1px solid transparent;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;

	color: #fff;
	background-color: #337ab7;
}

.win>.content-wrap {
	padding: 15px;
}



.win>.content-wrap>.content>.form-group {
	margin-bottom: 15px;
	line-height: 34px;

	font-size: 14px;
}


.win>.content-wrap>.content>.form-group>span {
	display: inline-block;
	margin-right: 8px;
	width: 30%;

	text-align: right;
}

.win>.content-wrap>.content>.form-group input {
	margin-left: 8px;
	padding: 6px 12px;
	width: 60%;
	height: 22px;

	background-color: white;
	border: 1px solid #ccc;
	border-radius: 4px;
	opacity: 1;
	box-sizing: content-box;
}

.win>.content-wrap>.content>.form-group input.disable {
	background-color: #eee;
}

.win>.content-wrap>.content>.form-group input:focus {
	border-color: #66afe9;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
}


.input-group {
	display: inline-block;
	width: 60%
}

.input-group>input,
.input-group>.tips {
	width: 100% !important;
}


.input-group>input {
	display: block !important;
}

.input-group>.tips {
	display: inline-block !important;
	margin-right: -8px;
	float: right;
}

.func-btn-group {
	text-align: center;
}

.func-btn-group .btn {
	margin: 0 0.5rem;
}

</style>
